<style rel="styleesheet" lang="less">
@media screen and (min-width: 829px) {
  #teacherList {
    background-color: #F6F7FB;
    * {
      box-sizing: border-box;
    }
    .content {
      max-width: 1240px;
      margin: 0 auto;
      padding-bottom: 2rem;
    }
    .t-l-title {
      font-size: 2.36rem;
      padding: 7.43rem 0 2.5rem 0;
      text-align: center;
      
      color:rgba(51,51,51,1);
    }
    .t-l-tips {
      text-align: center;
      font-size: 1rem;
      line-height: 1.5rem;
      color: #838383;
      max-width: 66.43rem;
      margin: 0 auto
    }
    .list-row {
      margin-top: 6rem
    }
    .t-list {
      text-align: center;
      height: 28.57rem;
      margin-bottom: 3.57rem;
      img {
        display: inline-block;
        max-width: 100%;
        height: 17.5rem;
      }
      .t-l-box {
        background-color: #fff;
        height: 100%;
        overflow: hidden;
        border-bottom: solid 1.5rem #fff;
        cursor: pointer;
        /*box-shadow: 0 0 4px 0 rgba(150, 150, 150, 0.1);*/
        transition: box-shadow 0.5s;
        /*.tetst{*/
          /*box-shadow: 0 0 2.14rem 0 rgba(34,17,0,0.3);*/
        /*}*/
      }
      .t-l-box:hover {
        /*box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3);*/
        .info-box {
          transform: translate(0, -13rem)
        }
      }
      .info-box {
        text-align: left;
        transition: transform 0.5s;
        background-color: #fff;
        padding: 0 1.79rem;
        min-height: 23rem;
      }
      .t-web-name {
        color: #333;
        font-size: 1.71rem;
        margin-bottom: 1rem;
        padding-top: 1.2rem;
      }
      .t-phone-name {
        display: none
      }
      .t-info {
        color: #838383;
        font-size: 1rem;
        margin-bottom: 0.6rem;
        line-height: 1.4rem;
      }
    }
  }
}

@media screen and (max-width: 829px) {
  #teacherList {
    background-color: #F6F7FB;
    * {
      box-sizing: border-box;
      overflow: hidden;
    }
    .t-l-title {
      font-size: 0.36rem;
      color: #1A1A1A;
      text-align: center;
      padding: 0.4rem 0;
      font-weight: bold;
      background-color: #fff;
      span {
        display: block;
        color: rgba(24, 24, 24, 0.1)
      }
    }
    .t-l-tips {
      font-size: 0.26rem;
      color: #3E3A39;
      background-color: #fff;
      padding: 0 0.32rem 0.25rem 0.32rem;
    }
    .t-list {
      background-color: #fff;
      margin-top: 0.2rem;
    }
    .t-l-box {
      /*padding: 0.32rem;*/
      padding: 0.32rem;
      /*height: ;*/
      height: 2.19rem;
      overflow: hidden;
      img {
        display: inline-block;
        height: 1.60rem;
        width: 1.60rem;
      }
    }
    .info-box {
      /*height: 1.6rem;*/
      height: 3.6rem;
      width: 4.8rem;
      margin-left: 0.3rem;
      overflow: hidden;
      color: #888;
      font-size: 0.26rem;
      display: inline-block;
      vertical-align: top;
    }
    .t-phone-name {
      font-size: 0.32rem;
      color: #1a1a1a;
      font-weight: bold;
      margin-bottom: 0.28rem;
      .bw-btn {
        font-size: 0.2rem;
        color: #fff;
        height: 0.38rem;
        line-height: 0.35rem;
        border-radius: 0.3rem;
        margin-left: 0.15rem;
      }
    }
    .t-web-name {
      display: none
    }
    .t-info {
      line-height: 0.38rem;
      /*height: 0.8rem;*/
      height: 2rem;
      overflow: hidden;
      font-family:PingFang-SC-Medium;
      color:rgba(136,136,136,1);
      display:-webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
}

</style>
<template>
  <div id="teacherList" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="content">
      <div class="t-l-title">师资介绍&nbsp;&nbsp;<span>SHIZIJIESHAO</span></div>
      <div class="t-l-tips">
        我校拥有一支高素质、专业精良的专职教师队伍，完成团市委和基层团委的教学任务。根据党政工作重心的调整、青年培训需求的变化，培训领域和培训广度不断扩大，我校将培训工作拓展覆盖到了青年志愿者、创新创业者、青少年事务社会工作者等多个领域。并邀请校外专家、学者、教授、优秀教师及企业、社会组织的优良从业者为我校特聘教师，我校加强师资队伍建设，强化了兼职教师队伍力量，构建了团校团干部教育培训师资库，实现了我校教师队伍的专兼结合。
      </div>
      <el-row class="list-row" :gutter="50">
        <el-col class="t-list" :xs="24" :sm="24" :md="8" :lg="8" v-for="(item,key) in teacherList" :key="key">
          <div class="t-l-box">
              <img v-bind:src="item.ShowImageUrl">
              <div class="info-box">
                <p class="t-web-name">{{item.Name}}『{{item.TypeName}}教师』</p>
                <p class="t-phone-name">{{item.Name}}『{{item.TypeName}}教师』</p>
                <p class="t-info">{{item.Introduce}}</p>
              </div>
            <!--</div>-->
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {

  data() {
    return {
      fullscreenLoading:false,
      requestData:{
        "Condition": [{
          "GroupName": "1",
          "FieldName": "PlatformType",
          "FieldValue": 1,
          "SqlOperator": 3,
          "IsQuery": true
        }
        ],
        "IsPage": false,
      },
      teacherList:[]
    }
  },
  methods: {
    getTeacherInfo(){
      this.fullscreenLoading=true;

      this.$service('/api/Teacher/GetPageList', 'post',this.requestData ).then((response) => {
        this.fullscreenLoading=false;
        this.teacherList = response.Data.Items
      })
        .catch(err=>{
          this.fullscreenLoading=false;
        })
    }
  },
  props:['rootInfo'],
  mounted() {
    this.getTeacherInfo();
    if(document.body.offsetWidth || window.screen.width <829){
      this.rootInfo.showFooter=false;
    }else {
      this.rootInfo.showFooter=true;
    }
  },

}

</script>
